<template>
  <div class="productLine">
    <div class="tempxyz rightTable">
      <CCard class="rightCard">
        <CCardHeader class="header-wraper">
          <div class="header-left-titleWraper">
            <span class="textTitle">角色信息</span>
          </div>
          <div class="header-right-wraper">
            <CButton
              color="info"
              @click="addInfo"
              class="header-main-btn system-btn-style"
              data-permission="Btn_Role_Add"
            >
              <CIcon name="cil-plus" />&nbsp;角色
            </CButton>
          </div>
        </CCardHeader>
        <CCardBody class="card-body">
          <div style="height: calc(100% - 45px)">
            <TableList ref="table" :getColumn="getColumns" :getAxios="getAxios">
              <template v-slot:status="item">
                <img :src="getBadge(item.data.row.status)" />
              </template>
              <template v-slot:show_details="item">
                <CButton
                  title="分配权限"
                  variant="outline"
                  class="textBtnStyle onButton system-btn-style"
                  @click="allocation(item.data.row)"
                  data-permission="Btn_Role_Allot"
                >
                  分配权限
                </CButton>
                <!--<CButton
                  title="禁用"
                  v-if="item.data.row.status == 1"
                  variant="outline"
                  class="textBtnStyle onButton system-btn-style"
                  @click="lockUser(item.data.row)"
                  data-permission="Btn_User_Ban"
                >
                  禁用
                </CButton>-->
                <CButton
                  id="jiejin"
                  title="解除"
                  v-if="item.data.row.status == 0"
                  variant="outline"
                  class="textBtnStyle onButton system-btn-style"
                  @click="unLock(item.data.row)"
                  data-permission="Btn_User_Remove"
                >
                  解除
                </CButton>
                <CButton
                  title="编辑"
                  variant="outline"
                  class="textBtnStyle onButton system-btn-style"
                  @click="update(item.data.row)"
                  data-permission="Btn_Role_Up"
                >
                  编辑
                </CButton>
                <CButton
                  title="删除"
                  variant="outline"
                  class="textBtnStyle onButton system-btn-style"
                  @click="del(item.data.row.id)"
                  data-permission="Btn_Role_Del"
                >
                  删除
                </CButton>
              </template>
            </TableList>
          </div>
        </CCardBody>
        <!--  <CCardBody>
          <div class="role">
            <CDataTable :items="data" :fields="fields" hover border>
              &lt;!&ndash; pagination &ndash;&gt;
              <template #status="{ item }">
                <td align="center">
                  <img :src="getBadge(item.status)" />
                </td>
              </template>

              <template #show_details="{ item }">
                <td class="py-2" align="center">
                  &lt;!&ndash; <CButton
                    v-c-tooltip="'分配权限'"
                    title="分配权限"
                    variant="outline"
                    style="margin-right: 5px"
                    @click="allocation(item)"
                    data-permission="Btn_Role_Allot"
                  >
                    <CIcon class="colortempstyle" name="cil-fork" />
                  </CButton>
                  <CButton
                    v-c-tooltip="'禁用'"
                    title="禁用"
                    v-if="item.status == 1"
                    variant="outline"
                    style="margin-right: 5px"
                    @click="lockUser(item)"
                    data-permission="Btn_User_Ban"
                  >
                    <CIcon class="colortempstyle" name="cil-ban" />
                  </CButton>
                  <CButton
                    id="jiejin"
                    v-c-tooltip="'解除'"
                    title="解除"
                    v-if="item.status == 0"
                    variant="outline"
                    style="margin-right: 5px"
                    @click="unLock(item)"
                    data-permission="Btn_User_Remove"
                  >
                    <CIcon class="colortempstyle" name="cil-link-broken" />
                  </CButton>
                  <CButton
                    v-c-tooltip="'编辑'"
                    title="编辑"
                    variant="outline"
                    style="margin-right: 5px"
                    @click="update(item)"
                    data-permission="Btn_Role_Up"
                  >
                    <img
                      class="featuresstyle"
                      src="@/assets/icons/edit.svg"
                      alt
                    />
                  </CButton>
                  <CButton
                    v-c-tooltip="'删除'"
                    title="删除"
                    color="rgb(2,40,88)"
                    variant="outline"
                    style="margin-right: 5px"
                    @click="del(item.id)"
                    data-permission="Btn_Role_Del"
                  >
                    <img
                      class="featuresstyle"
                      src="@/assets/icons/delete.svg"
                      alt
                    />
                  </CButton> &ndash;&gt;
                  <CButton
                    title="分配权限"
                    variant="outline"
                    class="textBtnStyle"
                    @click="allocation(item)"
                    data-permission="Btn_Role_Allot"
                  >
                  分配权限
                  </CButton>
                  <CButton
                    title="禁用"
                    v-if="item.status == 1"
                    variant="outline"
                    class="textBtnStyle"
                    @click="lockUser(item)"
                    data-permission="Btn_User_Ban"
                  >
                  禁用
                  </CButton>
                  <CButton
                    id="jiejin"
                    title="解除"
                    v-if="item.status == 0"
                    variant="outline"
                    class="textBtnStyle"
                    @click="unLock(item)"
                    data-permission="Btn_User_Remove"
                  >
                  解除
                  </CButton>
                  <CButton
                    title="编辑"
                    variant="outline"
                    class="textBtnStyle"
                    @click="update(item)"
                    data-permission="Btn_Role_Up"
                  >
                  编辑
                  </CButton>
                  <CButton
                    title="删除"
                    variant="outline"
                    class="textBtnStyle"
                    @click="del(item.id)"
                    data-permission="Btn_Role_Del"
                  >
                  删除
                  </CButton>
                </td>
              </template>
            </CDataTable>
          </div>
        </CCardBody>
        <CCardFooter>
          <CRow>
            <CCol class="footerPage">
              <span class="pageContent">
                每页
                <CSelect
                  @change="getVendorId($event)"
                  :options="[10, 15, 20, 25]"
                  v-model="pageSize"
                  class="selectStyle"
                  style
                />
                条记录。第{{ this.currentPage }}页(总共{{ this.total }}页，{{
                  this.allNum
                }}条记录)
              </span>
              <CPagination
                :activePage.sync="currentPage"
                :pages="total"
                align="end"
                v-if="total != 0"
              />
            </CCol>
          </CRow>
        </CCardFooter>-->
      </CCard>
    </div>
    <Modal
      v-model="delShow"
      draggable
      scrollable
      title="删除角色"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">
        <img src="@/assets/icons/shanchu.svg" alt />
        <span style="margin-left: 5px">删除角色</span>
      </p>
      <div class="modalBody">
        <p>您正在删除该角色记录信息</p>
        <p>请确认是否删除?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="delShow = false" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="delOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="updateShow"
      draggable
      scrollable
      title="修改信息"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">修改信息</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <CInput
              label="角色名称"
              placeholder="请输入角色名称"
              horizontal
              v-model="roleData.name"
            />
            <CInput
              label="角色描述"
              placeholder="请输入角色描述"
              horizontal
              v-model="roleData.description"
            />
            <CInput
              label="角色编码"
              placeholder="请输入角色编码"
              horizontal
              v-model="roleData.code"
              disabled="true"
            />
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="updateCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="updateOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="addShow"
      draggable
      scrollable
      title="新增角色"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">新增角色</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <!-- <div class="myColtemp" style="width: 65%">
              <label
                class="myColPri"
                style="margin-right: 25px; display: inline-block"
                >角色类型</label
              >
              <RadioGroup
                v-model="taskStatus"
                class="m_radio_group"
                label="角色类型"
              >
                <Radio label>普通用户</Radio>
                <Radio label="系统管理员">系统管理员</Radio>
              </RadioGroup>
            </div> -->
            <CInput
              label="角色名称"
              placeholder="请输入角色名称"
              horizontal
              v-model="roleData.name"
            />
            <CInput
              label="角色描述"
              placeholder="请输入角色描述"
              horizontal
              v-model="roleData.description"
            />
            <CInput
              label="角色编码"
              placeholder="请输入角色编码"
              horizontal
              v-model="roleData.code"
              disabled="disabled"
              v-if="disStatus"
            />
            <CInput
              label="角色编码"
              placeholder="请输入角色编码"
              horizontal
              v-model="roleData.code"
              v-if="roleStatus"
            />
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="addShow = false" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="addOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="selectShow"
      draggable
      scrollable
      title="选择类型"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">选择类型</p>
      <CRow>
        <CCol md="12">
          <CForm>
            <RadioGroup v-model="selectId">
              <Radio
                v-for="(item, index) in typeList"
                :key="index"
                :label="item.type"
                >{{ item.name }}</Radio
              >
            </RadioGroup>
          </CForm>
        </CCol>
      </CRow>
      <template #footer class="footerBtns">
        <CButton @click="selectCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="selectOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>


    <Modal
      v-model="bindShow"
      draggable
      scrollable
      title="权限分配"
      class="permissionAssignmentModal"
    >
      <p slot="header" class="modalHeader">权限分配</p>
      <CButtonClose slot="close" @click="bindCancel" class="text-white" />

      <div v-if="selectId == 1" style="display: flex">
        <Tree
          ref="menuTree"
          @on-check-change="checkChange"
          :data="data5"
          :render="renderMenu"
          show-checkbox
          class="demo-tree-render"
          :check-strictly="false"
        ></Tree>
      </div>
      <div v-if="selectId == 2" style="display: flex">
        <Tree
          ref="proLineTree"
          :data="productionLineTree"
          show-checkbox
          :render="renderProLine"
          class="demo-tree-render"

        ></Tree>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="bindCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="bindOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>




    <Modal
      v-model="lockShow"
      draggable
      scrollable
      title="用户禁用"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">用户禁用</p>
      <div class="modalBody">
        <p>您正在禁用该用户</p>
        <p>请确认是否禁用?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="lockCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="lockOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
    <Modal
      v-model="unLockShow"
      draggable
      scrollable
      title="用户解禁"
      :styles="modalStyle"
    >
      <p slot="header" class="modalHeader">用户解禁</p>
      <div class="modalBody">
        <p>您正在解禁该用户</p>
        <p>请确认是否解禁?</p>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="unLockCancel" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="unLockOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
    </Modal>
  </div>
</template>

<script>
const fields = [
  {
    label: "序号",
    key: "number",
    _style: "width:80px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "角色名称",
    key: "name",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "角色描述",
    key: "description",
    _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    label: "角色状态",
    key: "status",
    _style: "width:90px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
  {
    key: "show_details",
    label: "操作",
    _style: "width:300px;text-align: center;background:rgba(241,244,249,1);",
    align: "center",
  },
];
import endIcon from "@/assets/icons/endIcon.png";
import failedIcon from "@/assets/icons/failedIcon.png";
import TableList from "@/template/table/TableList";
export default {
  name: "roleManage",
  components: { TableList },
  data() {
    return {
      modalStyle: { top: "300px" },
      lockShow: false,
      unLockShow: false,
      flag: "ROLE",
      disStatus: false,
      roleStatus: true,
      taskStatus: "",
      disabled: false,
      data5: [],
      productId: "",
      delShow: false,
      bindShow: false,
      updateShow: false,

      addShow: false,
      selectShow: false,
      loading: true,
      data: [],
      data1: [],
      data2: [],
      proId: [],
      buttonData: [],
      fields,
      select: 0,
      clickId: -1,
      total: 0,
      pages: 0,
      currentPage: 1,
      treeData: [],
      productionLineTree: [],
      roleData: {
        name: "",
        description: "",
        code: "",
        status: "",
      },
      typeList: [
        { name: "目录", type: 1 },
        { name: "生产线", type: 2 },
      ],
      selectId: 1,
      pageSize: 15,
      allNum: 0,

      getColumns: [
        {
          title: "角色名称",
          key: "name",
        },
        {
          title: "角色描述",
          key: "description",
        },
       /* {
          title: "角色状态",
          key: "status",
          slot: "status",
          width: 180,
          className: "centerText",
        },*/
        {
          key: "show_details",
          slot: "show_details",
          title: "操作",
          width: 320,
          className: "centerText",
        },
      ],
      getAxios: {
        url: this.$api.manageApi.getRole, //请求路径
        method: "get", //请求方式
        dataList: {}, //请求参数
      },
    };
  },
  computed: {
    getColumn1() {
      return [
        { type: "selection", width: 60, align: "center" },
        { key: "id", title: "产品id", align: "center" },
        { key: "name", title: "产品名称", align: "center" },
      ];
    },
    getColumn2() {
      return [
        { type: "selection", width: 60, align: "center" },
        { key: "workflowName", title: "流程名称", align: "center" },
      ];
    },
  },
  mounted() {
    //this.getRoleList();
    // this.getModelCategoryTree();
  },
  methods: {
    renderMenu(h, { root, node, data }) {
      return h(
        "span",
        {
          style: {
            display: "inline-block",
            width: "100%",
          },
        },
        [
          h("span", [h("span", data.title)]),
          h(
            "span",
            {
              style: {
                display: data.type == 1 ? "inline-block" : "none",
                float: "right",
                marginRight: "-200px",
              },
            },
            [
              h("span", "可见性"),
              h("Checkbox", {
                props: {
                  disabled: data.checked == true ? false : true,
                  value: data.visibleFlag == 0 ? true : false,
                },
                style: {
                  marginRight: "0px",
                },
                on: {
                  "on-change": (val) => {
                    this.visible(root, node, data, val);
                  },
                },
              }),
              h("span", "可用性"),
              h("Checkbox", {
                props: {
                  value: data.enableFlag == 0 ? true : false,
                  disabled:
                    data.checked == true && data.visibleFlag == 0
                      ? false
                      : true,
                },
                style: {
                  marginRight: "0px",
                },
                on: {
                  "on-change": (val) => {
                    this.enable(root, node, data, val);
                  },
                },
              }),
            ]
          ),
        ]
      );
    },
    renderProLine(h, { root, node, data }) {
      return h(
        "span",
        {
          style: {
            display: "inline-block",
            width: "100%",
          },
        },
        [
          h("span", [
            h("Icon", {
              props: {
                type:
                  data.workflowNum == null
                    ? "md-analytics"
                    : "ios-folder-outline",
              },
              style: {
                marginRight: "8px",
              },
            }),
            h("span", data.title),
          ]),
        ]
      );
    },
    checkChange(data, obj) {
      if (obj.children&& obj.children.length) {
        obj.children.forEach((item)=>{
          if (item.checked == true) {
            item.visibleFlag = 0;
            item.enableFlag = 0;
          } else if (item.checked == false) {
            item.visibleFlag = 1;
            item.enableFlag = 1;
          }
        })
      }else{
        if (obj.type == 1) {
          if (obj.checked == true) {
            obj.visibleFlag = 0;
            obj.enableFlag = 0;
          } else if (obj.checked == false) {
            obj.visibleFlag = 1;
            obj.enableFlag = 1;
          }
        }
      }
    },
    enable(root, node, data, val) {
      data.enableFlag = val == true ? 0 : 1;
    },
    visible(root, node, data, val) {
      data.visibleFlag = val == true ? 0 : 1;
      if (val == false) {
        data.enableFlag = 1;
        data.checked = false;
      }
    },
    // getVendorId(event) {
    //   let tempdata = event.target.value; //获取option对应的value值
    //   this.pageSize = parseInt(tempdata);
    // },
    getBadge(status) {
      switch (status) {
        case 1:
          return endIcon;
        case 0:
          return failedIcon;
      }
    },
    lockUser(val) {
      this.lockShow = true;
      this.clickId = val.id;
      this.roleData = val;
    },
    lockCancel() {
      this.lockShow = false;
    },
    lockOk() {
      let tableData = this.data;
      for (let i = 0; i < tableData.length; i++) {
        if (tableData[i].id === this.clickId) {
          tableData[i].status = 0;
        }
      }
      let self = this;
      let path = self.$api.manageApi.updateRole + "/" + self.clickId;
      let param = {
        code: self.roleData.code,
        description: self.roleData.description,
        name: self.roleData.name,
        status: "0",
      };
      this.http.post(path, param).then((res) => {
        if (res.data.success) {
          self.lockShow = false;
          self.$Message.success(res.data.message);
          self.getRoleList();
        } else {
          self.$Message.error(res.data.message);
        }
      });
    },
    unLock(val) {
      this.unLockShow = true;
      this.clickId = val.id;
      this.roleData = val;
    },
    unLockCancel() {
      this.unLockShow = false;
    },
    unLockOk() {
      let tableData = this.data;
      for (let i = 0; i < tableData.length; i++) {
        if (tableData[i].id === this.clickId) {
          tableData[i].status = 1;
        }
      }
      let self = this;
      let path = self.$api.manageApi.updateRole + "/" + self.clickId;
      let param = {
        code: self.roleData.code,
        description: self.roleData.description,
        name: self.roleData.name,
        status: "1",
      };
      this.http.post(path, param).then((res) => {
        if (res.data.success) {
          self.unLockShow = false;
          self.$Message.success(res.data.message);
          self.getRoleList();
        } else {
          self.$Message.error(res.data.message);
        }
      });
    },

    addInfo() {
      this.addShow = true;
    },
    allocation(val) {
      this.clickId = val.id;
      this.selectShow = true;
    },
    getRoleCatalog() {
      let self = this;
      let path = this.$api.manageApi.getRolePermission;
      let param = {
        roleId: this.clickId,
        type: 0,
      };
      this.http.get(path, param).then((res) => {
        if (res.data.success) {
          this.bindShow = true;
          let data = res.data.data;
          if (data.length >= 1) {
            if (data[0].title === "首页") {
              data.splice(0, 1);
            }
          }
          self.data5 = data;
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    getMenu() {
      let self = this;
      let path = this.$api.manageApi.resGetTree;
      let param = {
        type: 0,
        systemId: systemId,
        treeType: 1,
      };
      this.http.get(path, param).then((res) => {
        if (res.data.success) {
          self.treeData = res.data.data;
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },

    //获取当前行的内容
    handleSelectRow(selection) {
      let proId = [];
      for (let i = 0; i < selection.length; i++) {
        proId.push(selection[i].id);
      }
    },

    bindOk() {
      this.bindShow = false;
      this.selectShow = false;
      let self = this;
      let path = "";
      let param = "";
      if (self.selectId == 1) {
        path = this.$api.manageApi.binding;
        let roleFuncParams = [];
        let selectItem=this.$refs.menuTree.getCheckedAndIndeterminateNodes()
        for (let i = 0; i < selectItem.length; i++) {
          let params = {
            enableFlag: selectItem[i].enableFlag,
            permissionId: selectItem[i].id,
            permissionType: selectItem[i].type,
            visibleFlag: selectItem[i].visibleFlag,
          };
          roleFuncParams.push(params);
        }

        //首页单独保存
        let homeParam = {
          enableFlag: 0,
          permissionId: 9,
          permissionType: 0,
          visibleFlag: 0,
        };
        roleFuncParams.push(homeParam);
        param = {
          roleId: this.clickId,
          roleFuncParams: roleFuncParams,
        };
      } else if (self.selectId == 2) {
        path = this.$api.manageApi.createBind; // 线上接口
        let resIds = [];
        let checkData = this.$refs.proLineTree.getCheckedAndIndeterminateNodes();

        for (var i = 0; i < checkData.length; i++) {
          if (null == checkData[i].workflowNum && checkData[i].checked) {
            //没有传组分类节点的信息，只是生产线节点  3738  3735 3725
            let param = {};
            param.groupId = checkData[i].parentId;
            param.proLineId = checkData[i].id;
            resIds.push(param);
          }
        }


        param = {
          roleId: this.clickId,
          proLineList: resIds,
        };
      }


      this.http.post(path, param).then((res) => {
        if (res.data.success) {
          this.$Message.success(res.data.message);
          this.$store.dispatch("setPermission");
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    bindCancel() {
      this.bindShow = false;
      this.selectShow = false;
      this.selectId = 1;
    },
    update(val) {
      this.updateShow = true;
      this.clickId = val.id;
      this.roleData = JSON.parse(JSON.stringify(val)); //deep copy
    },
    del(id) {
      this.delShow = true;
      this.clickId = id;
    },
    addOk() {
      let self = this;
      let path = this.$api.manageApi.createRole;
      let param = {
        code: self.flag + "_code_" + self.roleData.code,
        description: self.roleData.description,
        name: self.roleData.name,
        statue: 1,
      };
      this.http.post(path, param).then((res) => {
        this.addShow = false;
        if (res.data.success) {
          this.$Message.success(res.data.message);
          self.getRoleList();
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    selectOk() {
      if (this.selectId == 1) {
        //目录
        this.getRoleCatalog();
      } else if (this.selectId == 2) {
        //生产线
        // this.getRoleRes();
        this.getModelCategoryTree();
        // this.getProduct();
      }
    },
    selectCancel() {
      this.selectId = 1;
      this.selectShow = false;
    },
    delOk() {
      let self = this;
      let path = this.$api.manageApi.deleteRole + "/" + self.clickId;
      this.http.get(path).then((res) => {
        this.delShow = false;
        if (res.data.success) {
          this.$Message.success(res.data.message);
          self.getRoleList();
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },

    getOk() {
      let self = this;
      let path = this.$api.manageApi.saveCatalog;
      let catalogIds = [];
      let checkedS = this.$refs.tree.getCheckedNodes();
      for (let i = 0; i < checkedS.length; i++) {
        catalogIds.push(checkedS[i].id);
      }
      let param = {
        roleId: self.clickId,
        catalogIds: catalogIds,
      };
      this.http.post(path, param).then((res) => {
        if (res.data.success) {
          this.$Message.success(res.data.message);
        } else {
          this.$Message.error(res.data.message);
        }
      });
      this.getShow = false;
    },
    getCancel() {
      this.getShow = false;
    },
    updateOk() {
      let self = this;
      let path = this.$api.manageApi.updateRole + "/" + self.clickId;
      let param = {
        code: self.roleData.code,
        description: self.roleData.description,
        name: self.roleData.name,
        status: self.roleData.status,
      };
      this.http.post(path, param).then((res) => {
        this.updateShow = false;
        if (res.data.success) {
          this.$Message.success(res.data.message);
          self.getRoleList();
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    updateCancel() {
      this.updateShow = false;
    },
    getRoleList() {
      let self = this;
      let path = this.$api.manageApi.getRole;

      self.data = [];
      let param = {
        pageNum: self.currentPage,
        pageSize: self.pageSize,
      };

      let getAxiosData = {
        method: "get",
        url: path,
      };
      this.$refs.table.getRefreshTable(param, getAxiosData);
      // this.http.get(path, param).then((res) => {
      //   self.allNum = res.data.data.total;
      //   if (res.data.success) {
      //     self.total = Math.ceil(res.data.data.total / self.pageSize);
      //     self.data = res.data.data.roleList;
      //     for (let i = 0; i < self.data.length; i++) {
      //       self.data[i].number =
      //         (self.currentPage - 1) * self.pageSize + i + 1;
      //     }
      //   } else {
      //     this.$Message.error(res.data.message);
      //   }
      // });
    },
    //查询生产线
    getModelCategoryTree() {
      let self = this;
      self.productionLineTree = [];
      let path = this.$api.manageApi.systemGetRoleProductLine;
      // let path = "http://localhost:8080/sthx_server/system/productLine/api/v1/getRoleProductLine"; //本地调试
      let param = {
        roleId: this.clickId,
      };

      this.http.get(path, param).then((res) => {
        self.loading = false;
        if (res.status == 200) {
          this.bindShow = true;
          self.productionLineTree = res.data.data;
          // if (res.data.data.length > 0) {
          //   self.productionLineTree = res.data.data;
          //   // self.productionLineTree[0].selected = true;
          //   // self.productId = self.productionLineTree[0].id;
          //   // self.pid = self.treeData[0].parentId;
          //   if (self.productionLineTree[0].children.length > 0) {
          //     this.children = true;
          //   } else {
          //     this.children = false;
          //   }
          // } else {
          //   self.productId = "0";
          //   self.pid = "0";
          // }
        } else {
          this.$Message.error(res.data.message);
        }
      });
      // this.getProduct(self.productId);
    },
    //获取流程线列表
    getProduct(groupId) {
      let path = this.$api.manageApi.systemGetRoleProductLine; //线上接口
      // let path = "http://localhost:8080/sthx_server/system/productLine/api/v1/getRoleProductLine"; //本地调试
      let param = {
        roleId: this.clickId,
        groupId: groupId,
      };
      this.http.get(path, param).then((res) => {
        if (res.data.code == 0) {
          let newData = res.data.data.dataList;
          for (let i = 0; i < newData.length; i++) {
            let id = newData[i].id;
            if (res.data.data.select.indexOf(id) != -1) {
              newData[i]._checked = true;
            }
          }
          this.data2 = newData;
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
  },
  watch: {
    data(newVal, oldVal) {
      this.$nextTick(function () {
        this.GlobalPermissionRender.render();
      });
    },
    // taskStatus(newval) {
    //   if (newval == "系统管理员") {
    //     this.roleStatus = false;
    //     this.disStatus = true;
    //     this.roleData.code = "ADMIN";
    //   } else {
    //     this.roleStatus = true;
    //     this.disStatus = false;
    //     this.roleData.code = "";
    //   }
    // },
    currentPage(newVal, oldVal) {
      this.currentPage = newVal;
      this.getRoleList();
    },
    pageSize(newVal, oldVal) {
      this.pageSize = newVal;
      this.getRoleList();
    },
  },
};
</script>

<style scoped>
.col-xl-12 {
  padding-left: 20px;
  padding-right: 20px;
}
.proTree {
  width: 50%;
  max-height: 480px;
  padding-right: 5px;
  overflow-y: scroll;
  margin-right: 15px;
}
::-webkit-scrollbar-thumb {
  background-color: #7eb8ee;
}

@media screen and (min-width: 1367px) {
}

.leftTree .btn:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
.footerPage {
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
  color: #151517 !important;
  /* margin-right: 10px; */
}
.pageContent {
  margin-right: 26px;
  font-size: 14px;
}
.selectStyle {
  display: inline-block;
  width: 100px;
  margin-right: 5px;
}
.userTitle {
  margin-bottom: 0 !important;
}
.role {
  height: calc(100% - 52px);
  overflow-y: auto;
}
</style>
<style scoped>
/deep/.ivu-table td.centerText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  text-align: -moz-center;
  text-align: -webkit-center;
}

.onButton:hover {
  color: white;
}
</style>
